<template>
  <view class="ranking-item">
    <view class="ranking-item-left">
      

      <image class="img" :src="avtor" mode="aspectFit"></image>
    </view>
    <view class="ranking-item-right">
      <view class="name">
        <text class="serial">{{ Serial_Number }}号</text>
        <text class="name-text">{{ name }}</text>
      </view>
      <view class="votes">票数：{{ Votes }}</view>
    </view>
    <view class="ranking-position">第{{ rank }}名</view>
  </view>
</template>

<script>
export default {
  props: {
    Serial_Number: Number,
    name: String,
    Votes: Number,
    rank: Number,
    avtor: String
  }
};
</script>

<style scoped>
.ranking-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.ranking-item-left {
  flex: 1;
}

.img {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  /* 默认灰色块 */
  border-radius: 50%;
}

.ranking-item-right {
  flex: 3;
}

.name {
  font-size: 18px;
  font-weight: bold;
}

.serial {
  margin-right: 10px;
}

.votes {
  margin-top: 10px;
  font-size: 16px;
}

.ranking-position {
  flex: 1;
  font-size: 16px;
}
</style>